<template>
  <el-table
    :data="data"
    v-bind="$attrs"
    v-on="$listeners">
    <template v-for="(item, index) of columns">
      <!-- render -->
      <el-table-column
        v-if="item.render"
        v-bind="Object.assign({}, defaultColumn, item)"
        :key="index">
        <template slot-scope="scope">
          <ren :render="item.render" :params="scope"></ren>
        </template>
      </el-table-column>
      <!-- no render -->
      <el-table-column
        v-else
        v-bind="Object.assign({}, defaultColumn, item)"
        :key="index">
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
import ren from './ren.js';
export default {
  components: { ren },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 列配置
    columns: {
      type: Array,
      default: () => []
    },
    // 默认列配置
    defaultColumn: {
      type: Object,
      default: () => {
        return {
          align: 'center', // 对齐方式
          sortable: false, // 是否可排序
          showOverflowTooltip: true // 当内容过长被隐藏时显示 tooltip
        };
      }
    }
  },
};
</script>
